<template>
  <div class="container">
    <div style="padding: 0 250px">
      <div class="list flexWarp">
        <div
          class="item pointer"
          v-for="(item, index) in list"
          :key="index"
          @click="gotoDetail(item.id)"
        >
          <img :src="item.cover" alt />
          <div class="content">{{ item.project_name }}</div>
        </div>
      </div>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :current-page="page"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { previousList } from "../api/review";
export default {
  data() {
    return {
      page: 1,
      total: 0,
      list: [],
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  watch: {
    id(val) {
      this.getList(val);
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList(id) {
      const params = {
        id: id || this.id,
        page: this.page,
        is_now: 0,
      };
      previousList(params).then((res) => {
        const { data, total } = res.data;
        this.list = data;
        this.total = total;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    gotoDetail(id) {
      this.$router.push({
        path: "/worksDetail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #eff1f4;
  padding: 60px 0;
  .list {
    .item {
      width: 334px;
      background: #ffffff;
      margin-left: 28px;
      margin-bottom: 28px;
      &:nth-child(4n + 1) {
        margin-left: 0;
      }
      img {
        width: 100%;
        height: 240px;
      }
      .content {
        padding: 23px;
        font-size: 20px;
        color: #262626;
        line-height: 30px;
      }
    }
  }
  .page {
    text-align: center;
  }
}
</style>